<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: header"/>
<body style="background-color: #fff">
    <style>
        .dm-form{padding-top: 20px; padding-left: 100px;}
        .dm-form tr{height: 50px;}
        .dm-form input{width: 360px}
        .dm-label{width: 80px;padding-right: 15px;text-align: right}
    </style>
    <form id="form" class="dm-form" method="post" action='/system/menu/add'>
        <input type="hidden" name="id" th:value="${menu.menuId}">
        <table>
            <tr>
                <td class="dm-label">上级菜单：</td>
                <td class="dm-content">
                    <input id="input_parentId" name="parentId" th:value="${menu.parentId}">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单类型：</td>
                <td class="dm-content">
                    <input class="menuType" name="menuType" id="menuType1" data-options="label:'目录'" value="1">
                    <input class="menuType" name="menuType" id="menuType2" data-options="label:'菜单'" value="2">
                    <input class="menuType" name="menuType" id="menuType3" data-options="label:'按钮'" value="3">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单名称：</td>
                <td class="dm-content">
                    <input class="easyui-textbox" name="menuName" data-options="required:true" th:value="${menu.menuName}">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单图标：</td>
                <td class="dm-content">
                    <input id="input_icon" class="easyui-textbox" name="icon">
                    <i id="icon_view" th:class="${'layui-icon '+menu.icon}"></i>
                </td>
            </tr>

            <tr>
                <td class="dm-label">菜单URL：</td>
                <td class="dm-content">
                    <input id="input_url" class="easyui-textbox" name="url">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单权限：</td>
                <td class="dm-content">
                    <input id="input_perms" class="easyui-textbox" name="perms">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单排序：</td>
                <td class="dm-content">
                    <input id="input_order" name="orderNum" class="easyui-numberspinner" value="1">
                </td>
            </tr>
            <tr>
                <td class="dm-label">是否显示：</td>
                <td class="dm-content">
                    <input class="visible" name="visible" data-options="label:'显示'" value="0" checked>
                    <input class="visible" name="visible" data-options="label:'不显示'" value="1">
                </td>
            </tr>
        </table>
    </form>
<script type="text/javascript">
    var parentMenuType = [[${menu.menuType}]]-1;
    $(function() {
        $('.visible').radiobox({})
        $('.menuType').radiobox('checked',[[${menu.menuType}]]);
        changeRadioByParentType(parentMenuType)
    });

    $('#input_parentId').combotree({
        url: '/system/menu/menuTree',
        panelHeight: 260,
        editable: false,
        onSelect: function (node) {
            parentMenuType = node.attributes;
            changeRadioByParentType();
        }
    });

    $('.menuType').radiobox({
        onChange: function (checked,data) {
            if (data.value == 1) {
                $("#input_url").parents("tr").hide();
                $("#input_perms").parents("tr").hide();
                $("#input_icon").parents("tr").show();
                $("#input_visible").parents("tr").show();
                $('#input_url').val('');
                $('#input_perms').val('');
            } else if (data.value == 2) {
                $("#input_url").parents("tr").show();
                $("#input_perms").parents("tr").show();
                $("#input_visible").parents("tr").show();
                if (parentMenuType == 0) {
                    $("#input_icon").parents("tr").show();
                } else {
                    $("#input_icon").parents("tr").hide();
                    $('#input_icon').val('');
                }
            } else if (data.value == 3) {
                $("#input_url").parents("tr").hide();
                $("#input_perms").parents("tr").show();
                $("#input_icon").parents("tr").hide();
                $("#input_visible").parents("tr").hide();
                $('#input_url').val('');
                $('#input_icon').val('');
            }
        }
    });

    function changeRadioByParentType(){
        if (!parentMenuType || parentMenuType == 0) {
            $('#menuType1').radiobox('enable');
            $('.menuType').radiobox('checked', "1");
            $('#menuType2').radiobox('enable');
            $('#menuType3').radiobox('disable');
        } else if (parentMenuType == 1) {
            $('#menuType1').radiobox('enable');
            $('#menuType2').radiobox('enable');
            $('.menuType').radiobox('checked', "2");
            $('#menuType3').radiobox('disable');
        } else if (parentMenuType == 2) {
            $('#menuType3').radiobox('enable');
            $('.menuType').radiobox('checked', "3");
            $('#menuType1').radiobox('disable');
            $('#menuType2').radiobox('disable');
        }
    }

    $("#input_icon").textbox({
        buttonText: '选择图标',
        onClickButton: function(){
            dm.openViewDialog('选择图标','/system/menu/icon',780,600);
        }
    });

    function changeIcon(value) {
        $("#input_icon").textbox('setValue', value);
        $("#icon_view").removeClass().addClass('layui-icon').addClass(value);
    }

    function submitHandler(index) {
        dm.save('form', function() {
            parent.layer.close(index);
            parent.dm.search('table', null, 'treegrid');
        })
    }
</script>
</body>
</html>
